<template>
    <div>
        <h1>地址列表</h1>
        <el-table 
        :data="List"
        v-if="bol"
         style="width: 100%">
            <el-table-column fixed prop="id" label="id" />
            <el-table-column prop="name" label="姓名" />
            <el-table-column prop="area" label="区域" />
            <el-table-column prop="address" label="详细地址" width="200" />
            <el-table-column prop="tel" label="电话" />
            <el-table-column prop="tips" label="备注" />
            <el-table-column prop="bol" label="默认地址" >
                <template #default="scope">
                <!-- {{ scope.row.bol }} -->
                <el-button @click="setMo(scope.row.id)" v-if="scope.row.bol==0" link type="primary" size="small"
                >设为默认地址</el-button
                >
                <span v-else>默认地址</span>
                </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="120">
                <template #default>
                <el-button link type="primary" size="small" 
                >编辑</el-button>
                <el-button link type="primary" size="small">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        
        <!-- <table border="1" v-if="bol">
            <tr>
                <th>序号</th>
                <th>姓名</th>
                <th>区域</th>
                <th>详细地址</th>
                <th>手机号</th>
                <th>备注</th>
                <th></th>
                <th>操作</th>
            </tr>
            <tr  v-for="(item,index) in List" :key="item.id">
                <td>{{ index+1 }}</td>
                <td>{{ item.name }}</td>
                <td>{{ item.area }}</td>
                <td>{{ item.address }}</td>
                <td>{{ item.tel }}</td>
                <td>{{ item.tips }}</td>
                <td>{{ item.bol==1?'默认地址':'非默认'}}</td>
                <td>
                    <button>编辑</button>
                    <button @click="del(item.id)">删除</button>
                </td>
            </tr>
            
        </table> -->
        <div v-else>
            <p>还没有地址，<router-link to="/add">新增地址</router-link></p>
        </div>
        <el-pagination 
        background
        layout="prev, pager, next" 
        :page-size="3"
        @current-change="changePage"
        :total="total" />
    </div>
</template>


<script setup>
import axios from 'axios';
import {ref,reactive,onMounted} from 'vue';
let bol=ref(false);
let List=ref([]);

//设置分页数据
let currPage=ref(1);//设置当前第几页
let currNum=ref(4);//设置一页多少条


//设置总页数
let total=ref(0);

let getTotal=()=>{
    axios.get('/api/getTotal').then(res=>{

        console.log(res.data.data[0]['COUNT(*)']);
        //获取总页数
        let num=res.data.data[0]['COUNT(*)'];
        total.value=num;
    });
};


//参数page是当前页数，num是每页条数
let getData=(page,num)=>{
    //请求接口
    axios.get(`/api/getAddress/${page}/${num}`).then(res=>{
        console.log(res.data);
        //判断返回的数据内容，如果数据为0，则返回false，显示空数据状态，否则返回true，显示数据列表
        if(res.data.length){
            bol.value=true;
            List.value=res.data;
        }else{
            bol.value=false;
        }
    });
};
let del=e=>{
    //点击删除mysql中的数据
   axios.post('/api/del',{id:e}).then(res=>{
       console.log(res.data);
       getData();
   });
}
onMounted(()=>{
    getData(currPage.value,currNum.value);
    getTotal();
});

//设置为默认地址
let setMo=(id)=>{
    //请求接口
    axios.post('/api/setMo',{id:id}).then(res=>{
        console.log(res.data);
        getData();
    })
};
//点击分页
let changePage=p=>{
    console.log(p);
    getData(currPage.value,currNum.value);
};

</script>

<style lang="scss" scoped>


</style>